<!DOCTYPE html>
<head>
    <title>商品详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" /><!-- bootstrap -->
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script> <!-- jquery-validator -->
    <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script><!-- layer -->
    <script type="text/javascript" src="/js/md5.min.js"></script><!-- md5.js -->
    <script type="text/javascript" src="/js/common.js"></script><!-- common.js -->
    <script type="text/javascript" src="/js/socket.js"></script><!-- common.js -->
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>
    <div class="panel-body">
    <div id="userTip" style="display: none">
        <span> 您还没有登录，请<a href="/login.html">登陆</a>后再操作<br/></span>
    </div>
    <span>没有收货地址的提示。。。</span>
</div>
<table class="table">
    <tr>
        <td>商品名称</td>
        <td colspan="3" id="goodName"></td>
    </tr>
    <tr>
        <td>商品图片</td>
        <td colspan="3"><img id="goodImg"  width="200" height="200" /></td>
    </tr>
    <tr>
        <td>秒杀开始时间</td>
        <td id="startDate"></td>
        <td id="seckillTip">
        </td>
        <td>
            <img id="verifyCodeImg" width="80" height="32"  onclick="initVerifyCodeImg()" style="display: none">
            <input id="verifyCode" style="display: none">
            <button class="btn btn-primary btn-block" type="button" id="buyButton" onclick="getPath()">立即秒杀</button>
        </td>
    </tr>
    <tr>
        <td>商品原价</td>
        <td colspan="3" id="goodPrice"></td>
    </tr>
    <tr>
        <td>秒杀价</td>
        <td colspan="3" id="seckillPrice"></td>
    </tr>
    <tr>
        <td>库存数量</td>
        <td colspan="3" id="stockCount"></td>
    </tr>
</table>
</div>
<script>
    var seckillId = getQueryString("seckillId");
    var u;
    //根据用户是否有登陆展示出不同的信息
    $.ajax({
        url:"http://localhost:9000/member/getCurrentUser",
        type:"GET",
        xhrFields: { withCredentials: true },
        success:function(data){
            if(data.code==200){
                //返回值是当前登录用户信息
                showUserStatus(data.data);
            }else{
                layer.msg("错误码:"+data.code+"错误信息:"+data.msg)

            }
        }
    })
    var uuid;
    function showUserStatus(user){
        if(!user){
            $("#userTip").show()
            return;
        }
        //如果有登陆 user是当前登录的用户对象
        u = user;
        uuid = getUuid(user.id)
        $("#verifyCodeImg").show();
        $("#verifyCode").show();
        //界面加载完初始化验证码

        initVerifyCodeImg()

    }
    //初始化验证码
    function initVerifyCodeImg() {
        $("#verifyCodeImg").prop("src","http://localhost:9000/seckill/initVerifyCodeImg?uuid="+uuid);
    }


    function getPath() {
        if (!u) {
            layer.msg("请先登录")
            return
        }

        $.ajax({
            url: "http://localhost:9000/seckill/getPath",
            type: "POST",
            data: {"uuid":uuid,"verifyCode":$("#verifyCode").val()},
            xhrFields: {withCredentials: true},
            success: function (data) {
                if (data.code == 200) {
                    //window.location.href = "http://localhost/order_detail.html?orderNo=" + data.data
                    doSeckill(data.data)
                    initVerifyCodeImg()
                } else {
                    layer.msg("错误码:" + data.code + "错误信息:" + data.msg)
                    initVerifyCodeImg()
                }
            }
        })
    }

    function doSeckill(path) {
        if (!u) {
            layer.msg("请先登录")
            return
        }

        $.ajax({
            url: "http://localhost:9000/seckill/order/"+path+"/doSeckill",
            type: "POST",
            data: {"seckillId": seckillId,"uuid":uuid},
            xhrFields: {withCredentials: true},
            success: function (data) {
                if (data.code == 200) {
                    //window.location.href = "http://localhost/order_detail.html?orderNo=" + data.data
                    layer.msg(data.data);
                    //与websocket建立连接
                    createScoket(uuid);
                } else {
                    layer.msg("错误码:" + data.code + "错误信息:" + data.msg)
                }
            }
        })
    }


        $.ajax({
            url: "http://localhost:9000/seckill/seckillGood/getSeckillGoodDetail?seckillId=" + seckillId,
            type: "GET",
            xhrFields: {withCredentials: true},
            success: function (data) {
                if (data.code == 200) {
                    renderData(data.data);
                    //渲染时间
                    renderDate(data.data.startDate, data.data.endDate);
                } else {
                    layer.msg("错误码:" + data.code + "错误信息:" + data.msg)

                }
            }
        })

        function renderData(data) {
            $("#goodName").html(data.goodName);
            $("#goodImg").prop("src", data.goodImg);
            $("#startDate").html(data.startDate);
            $("#goodPrice").html(data.goodPrice);
            $("#seckillPrice").html(data.seckillPrice);
            $("#stockCount").html(data.stockCount);
        }

        var remainStartDate;//距离开始的时间
        var remainEndDate;//距离结束的时间
        var timer;

        function renderDate(start, end) {
            var startDate = new Date(start);//开始时间
            var endDate = new Date(end);//结束时间
            var now = new Date();//当前时间

            remainStartDate = parseInt((startDate.getTime() - now.getTime()) / 1000);
            remainEndDate = parseInt((endDate.getTime() - now.getTime()) / 1000);
            timer = setInterval(showDate, 1000);
        }

        function showDate() {
            remainStartDate--;
            remainEndDate--;
            if (remainStartDate > 0) {
                $("#seckillTip").html("距离秒杀开始还有" + remainStartDate + "秒")
            } else if (remainEndDate > 0) {
                $("#seckillTip").html("距离秒杀结束还有" + remainEndDate + "秒")
            } else {
                $("#seckillTip").html("秒杀结束");
                //秒杀结束,清空定时任务
                clearInterval(timer);
            }
        }

</script>
</body>
</html>